<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>赛程列表</title>
		<script type="text/javascript" src="/js/jquery-1.11.1.js"></script>
    	<script type="text/javascript" src="/js/bootstrap.js" ></script>
    	<link  rel="stylesheet" type="text/css" href="/css/bootstrap.css"></link>
    	<link  rel="stylesheet" type="text/css" href="/css/style.css"></link>
		<style>
			span{
				color: #1EABFF;
				padding: 0 5px;
			}
		</style>
	</head>
	<body>
		<form id="myForm" class="form-horizontal">
			<h2>NBA赛程列表</h2>
			<div class="searchDiv">
				<button class="btn btn-danger">批量删除</button>
				<a href="/pages/team/add.html" class="btn btn-success">添加</a>
				球队:<input name="chineseName" placeholder="球队名称"/>
				比赛时间:<input name="beginDate" type="date"/>-<input name="endDate" type="date"/>
				所属类型:<select name="typeId">
					<option value="-1">请选择类型</option>
					<option value="1">NBA季前赛</option>
					<option value="2">NBA常规赛</option>
					<option value="3">NBA季后赛</option>
					<option value="4">NBA总决赛</option>
					<option value="5">NBA全明星赛</option>
				</select>
				<button type="button" onclick="loadData()" class="btn btn-info">查询</button>
			</div>
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>全选<input type="checkbox" id="all"/></th>
						<th>比赛时间</th>
						<th>主队</th>
						<th>主队得分</th>
						<th>客队</th>
						<th>客队得分</th>
						<th>比赛类型</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tboby">
					<tr>
						<td><input type="checkbox" name="one"/></td>
						<td>2021-4-24 7:30</td>
						<td>老鹰</td>
						<td>118</td>
						<td>热火</td>
						<td>103</td>
						<td>NBA常规赛</td>
						<td>已结束</td>
						<td>
							<button class="btn btn-sm btn-danger">删除</button>
							<button class="btn btn-sm btn-info">更新</button>
						</td>
					</tr>
				</tbody>
			</table>
			<!--分页部分-->
			<div class="form-group">
				<div class="col-sm-3" style="text-align: right">
					<ul class="pagination" style="margin: 0;">
						<li name="pageLi" id="firstPage"><a href="#">首页</a></li>
						<li name="pageLi" id="prePage"><a href="#">上一页</a></li>
						<li name="pageLi" id="nextPage"><a href="#">下一页</a></li>
						<li name="pageLi" id="lastPage"><a href="#">末页</a></li>
					</ul>
				</div>
				<label class="control-label col-sm-3" style="text-align: right" >
					共<span id="total"></span>条数据，共<span id="pages"></span>页
				</label>
				<label class="control-label col-sm-1" style="text-align: right" >
					每页显示
				</label>
				<div   class="col-sm-1" style="text-align: right; padding:0;margin: 0" >
					<select class="form-control" name="pageSize">
						<option value="5">5</option>
						<option value="10">10</option>
						<option value="15">15</option>
					</select>
				</div>
				<label class="control-label col-sm-1" style="text-align: left;width: 87px;padding: 8px 5px;" >
					条数据
				</label>
				<label class="control-label col-sm-1" style="text-align: right" >
					跳转到第
				</label>
				<div   class="col-sm-1" style="text-align: right; padding:0;margin: 0" ><input class="form-control" name="pageNum" value="1" /></div>
				<label class="control-label col-sm-1" style="text-align: left">页</label>
			</div>
		</form>
	</body>

</html>
<script>
	//页面加载完毕之后发送异步请求
	$(function(){
		loadData();
		$("ul[class='pagination']>li").click(function(){
			let num=$(this).attr("name");
			$("input[name='pageNum']").val(num);
			loadData();
		});
	});
	//填充分页信息
	function fillPageData(pageInfo) {
		//填充信息
		$("#total").html(pageInfo.total);
		$("#pages").html(pageInfo.pages);
		$("input[name='pageNum']").val(pageInfo.pageNum);
		$("select[name='pageSize']").val(pageInfo.pageSize);
		//设置按钮的属性值和样式
		$("#firstPage").attr("name",1);
		$("#prePage").attr("name",pageInfo.prePage);
		$("#nextPage").attr("name",pageInfo.nextPage);
		$("#lastPage").attr("name",pageInfo.pages);
		$("#firstPage").removeClass("disabled");
		$("#prePage").removeClass("disabled");
		$("#firstPage").removeClass("disabled");
		$("#prePage").removeClass("disabled");
		if(pageInfo.isFirstPage){//如果是第一页：上一页和首页禁用
			$("#firstPage").addClass("disabled");
			$("#prePage").addClass("disabled");
		}
		if(pageInfo.isLastPage){//如果已经是最后一页：下一页和末页禁用
			$("#nextPage").addClass("disabled");
			$("#lastPage").addClass("disabled");
		}
	}
	//更新按钮
	function updateTeam(id) {
		let pageNum=$("input[name='pageNum']").val();
		let pageSize=$("select[name='pageSize']").val();
		window.location.href="/pages/game/update.html?gameId="+id+"&pageNum="+pageNum+"&pageSize="+pageSize;
	}
	//删除按钮
	function deleteGame(id) {
		if(confirm("确定要删除吗?")) {
			//发起异步请求
			$.ajax({
				type: "POST",
				url: "/game/" + id, //RESTful风格的API定义
				data: "_method=DELETE",
				success: function (vo) {
					if(vo.code==200){
						let pageNum=$("input[name='pageNum']").val();
						loadData(pageNum);
					}else{
						alert("删除失败！"+vo.msg);
					}
				}
			});
		}
	}

	//上传图片按钮
	function uploadLogo(id) {
		let pageNum=$("input[name='pageNum']").val();
		let pageSize=$("select[name='pageSize']").val();
		window.location.href="/pages/game/uploadLogo.html?gameId="+id+"&pageNum="+pageNum+"&pageSize="+pageSize;
	}
	String.prototype.GetValue= function(para) {
		let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
		let r = this.substr(this.indexOf("\?")+1).match(reg);
		if (r!=null) return unescape(r[2]); return null;
	}
	//加载数据
	function loadData(){
		let url = document.location.toString();
		let pageNum=url.GetValue("pageNum");
		let pageSize=url.GetValue("pageSize");
		if(pageNum!=null&&$("input[name='pageNum']").val()!=null){
			$("input[name='pageNum']").val(pageNum);
		}
		if(pageSize!=null&&$("select[name='pageSize']").val()!=null){
			$("select[name='pageSize']").val(pageSize);
		}
		//alert($("#myForm").serialize())
		$.ajax({
			type: "GET",
			url: "/game/list",
			data: $("#myForm").serialize(),//主要是分页和多条件参数数据
			dataType:"json",
			success: function(vo){
				//alert( "Data Saved: " + vo );
				let list=vo.pageInfo.list;
				let str="";
				for(let i=0;i<list.length;i++){
					let obj=list[i];
					let gameId=obj.gameId;
					let homeTeam=obj.homeTeam.chineseName;
					let homeTeamScore=obj.homeTeamScore==null?'0':obj.homeTeamScore;
					let visitingTeam=obj.visitingTeam.chineseName;
					let visitingTeamScore=obj.visitingTeamScore==null?'0':obj.visitingTeamScore;
					let gameDate=obj.gameDate==null?'':obj.gameDate;
					let type=obj.typeId==2?'NBA常规赛':obj.typeId;//.typeName;
					let status=obj.status==0?'正常':obj.status;
					let isDel=obj.isDel;
					let btnStr="";
					if(isDel==0){
						btnStr='<button type="button" name="deleteBtn" class="btn btn-sm btn-danger" onclick="deleteGeam('+gameId+')">删除</button>&nbsp;' +
								'<button type="button" name="updateBtn" class="btn btn-sm btn-info" onclick="updateGame('+gameId+')">更新</button>&nbsp;';
					}else{
						btnStr='<button name="deleteBtn" class="btn btn-sm btn-danger disabled">已删除</button>';
					}
					str+='<tr>' +
							'            <td><input type="checkbox"/></td>' +
							'            <td>'+gameDate+'</td>' +
							'            <td>'+homeTeam+'</td>' +
							'            <td>'+homeTeamScore+'</td>' +
							'            <td>'+visitingTeam+'</td>' +
							'            <td>'+visitingTeamScore+'</td>' +
							'            <td>'+type+'</td>' +
							'            <td>'+status+'</td>' +
							'            <td>'+btnStr+'</td>' +
							'</tr>'
				}
				$("#tboby").html(str);
				//填充分页数据
				fillPageData(vo.pageInfo);
			}
		});
	}
</script>
